<script setup>
  import PageLayout from '@/components/PageLayout.vue'
  import DynamicTable from '@/components/DynamicTable.vue'
  import { useDynamicForm } from '@/hooks'
  import { ElMessage } from 'element-plus'
  import { getAdminList, addAdmin, deleteAdmin, changeAdminStatus, resetPassword } from '@/api'
  import { ref, onMounted, useTemplateRef } from 'vue'
  import { ElMessageBox } from 'element-plus'

  // 动态表单
  const { openForm } = useDynamicForm()
  // 表单弹窗
  const formRef = useTemplateRef('form')

  // 管理员列表数据
  const adminTableData = ref([])

  // 管理员列表表格列
  const adminTableColumns = [
    { label: 'Id', prop: 'id' },
    { label: '管理员名称', prop: 'username' },
    { label: '真实姓名', prop: 'realName' },
    { label: '性别', prop: 'gender', filter: val => (val === 1 ? '男' : '女') },
    { label: '电话', prop: 'phone' },
    { label: '邮箱', prop: 'email' },
    { label: '创建时间', prop: 'registeredTime' },
    { label: '状态', prop: 'status' },
    {
      label: '操作',
      prop: 'options',
      width: 250,
    },
  ]

  // 打开表单弹窗
  const handleGetAdminList = () => {
    const p = getAdminList().then(
      res => (adminTableData.value = res.data.admins.map(item => ({ ...item, status: item.status === 1 })))
    )

    formRef.value.load(p)
  }

  // 打开表单弹窗
  const onOpenForm = () => {
    const options = {
      title: '创建管理员',
      fields: [
        {
          label: '管理员账户',
          key: 'username',
          required: true,
        },
      ],
      onConfirm: (data, { close, setLoading }) => {
        setLoading(true)
        addAdmin(data)
          .then(res => {
            ElMessage.success('管理员创建成功')
            close()
            handleGetAdminList()
          })
          .finally(() => {
            setLoading(false)
          })
      },
    }

    openForm(options)
  }

  const onChangeStatus = async row => {
    ElMessageBox.confirm('确认修改管理员状态吗？', '提示').then(() => {
      const status = row.status ? 0 : 1
      changeAdminStatus({ userId: row.id, status }).then(() => {
        ElMessage.success('管理员状态修改成功')
        handleGetAdminList()
      })
    })
  }

  const onResetPassword = row => {
    ElMessageBox.confirm('确认重置该管理员密码吗？', '提示').then(() => {
      resetPassword({ userId: row.id }).then(() => {
        ElMessage.success('管理员密码重置成功')
        handleGetAdminList()
      })
    })
  }

  // 删除管理员
  const onDeleteAdmin = row => {
    ElMessageBox.confirm('确认删除该管理员吗？', '提示').then(() => {
      deleteAdmin({ id: row.id }).then(() => {
        ElMessage.success('管理员删除成功')
        handleGetAdminList()
      })
    })
  }

  // 刷新管理员列表
  const onFresh = () => {
    handleGetAdminList()
  }

  // 页面加载完成后获取管理员列表
  onMounted(() => {
    handleGetAdminList()
  })
</script>

<template>
  <page-layout>
    <template #header>
      <el-button @click="onFresh">刷新</el-button>
      <el-button type="success" @click="onOpenForm"> 创建管理员 </el-button>
    </template>

    <dynamic-table :data="adminTableData" :columns="adminTableColumns" ref="form">
      <template #status="{ row, value }">
        <el-switch
          v-model="row.status"
          inline-prompt
          size="large"
          active-text="启用"
          inactive-text="禁用"
          :beforeChange="() => onChangeStatus(row)"
        />
      </template>
      <template #options="{ row }">
        <el-button type="warning" @click="onResetPassword(row)"> 重置密码 </el-button>
        <el-button type="danger" @click="onDeleteAdmin(row)"> 删除 </el-button>
      </template>
    </dynamic-table>
  </page-layout>
</template>
